<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="browsermode" content="application">
    <meta name="x5-page-mode" content="app">
    <meta name="msapplication-tap-highlight" content="no">
    <meta content="telephone=no" name="format-detection">
    <title>京东福利购，全场包邮</title>
    <script>
      ;(function(win, lib) {
        var doc = win.document;
        var docEl = doc.documentElement;
        var metaEl = doc.querySelector('meta[name="viewport"]');
        var flexibleEl = doc.querySelector('meta[name="flexible"]');
        var dpr = 0;
        var scale = 0;
        var tid;
        var flexible = lib.flexible || (lib.flexible = {});

        if (metaEl) {
          // console.warn('将根据已有的meta标签来设置缩放比例')
          var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
          if (match) {
            scale = parseFloat(match[1]);
            dpr = parseInt(1 / scale);
          }
        } else if (flexibleEl) {
          var content = flexibleEl.getAttribute('content');
          if (content) {
            var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
            var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
            if (initialDpr) {
              dpr = parseFloat(initialDpr[1]);
              scale = parseFloat((1 / dpr).toFixed(2));
            }
            if (maximumDpr) {
              dpr = parseFloat(maximumDpr[1]);
              scale = parseFloat((1 / dpr).toFixed(2));
            }
          }
        }

        if (!dpr && !scale) {
          var isAndroid = win.navigator.appVersion.match(/android/gi);
          var isIPhone = win.navigator.appVersion.match(/iphone/gi);
          var devicePixelRatio = win.devicePixelRatio;
          if (isIPhone) {
            // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
              dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
              dpr = 2;
            } else {
              dpr = 1;
            }
          } else {
            // 其他设备下，仍旧使用1倍的方案
            dpr = 1;
          }
          scale = 1 / dpr;
        }

        docEl.setAttribute('data-dpr', dpr);
        if (!metaEl) {
          metaEl = doc.createElement('meta');
          metaEl.setAttribute('name', 'viewport');
          metaEl.setAttribute(
            'content',
            'initial-scale=' +
            scale +
            ', maximum-scale=' +
            scale +
            ', minimum-scale=' +
            scale +
            ', user-scalable=no',
          );
          if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
          } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
          }
        }

        function refreshRem() {
          var width = docEl.getBoundingClientRect().width;
          if (width / dpr > 540) {
            width = 540 * dpr;
          }
          var rem = width * 0.133334;
          docEl.style.fontSize = rem + 'px';
          flexible.rem = win.rem = rem;
        }

        win.addEventListener(
          'resize',
          function() {
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
          },
          false,
        );
        win.addEventListener(
          'pageshow',
          function(e) {
            if (e.persisted) {
              clearTimeout(tid);
              tid = setTimeout(refreshRem, 300);
            }
          },
          false,
        );

        if (doc.readyState === 'complete') {
          doc.body.style.fontSize = 12 * dpr + 'px';
        } else {
          doc.addEventListener(
            'DOMContentLoaded',
            function(e) {
              doc.body.style.fontSize = 12 * dpr + 'px';
            },
            false,
          );
        }

        refreshRem();

        flexible.dpr = win.dpr = dpr;
        flexible.refreshRem = refreshRem;
        flexible.rem2px = function(d) {
          var val = parseFloat(d) * this.rem;
          if (typeof d === 'string' && d.match(/rem$/)) {
            val += 'px';
          }
          return val;
        };
        flexible.px2rem = function(d) {
          var val = parseFloat(d) / this.rem;
          if (typeof d === 'string' && d.match(/px$/)) {
            val += 'rem';
          }
          return val;
        };
      })(window, window['lib'] || (window['lib'] = {}));
    </script>
    <!--<link rel="stylesheet" href="./style.css">-->
    <style>
        body{font-family:"Microsoft YaHei",arial;background-color:#f2f2f2;max-width:750px;margin:0 auto!important}i{font-style:normal}.top-wrap{height:.9rem}.top-wrap .inner{background:0 0 / 100% 2.8rem #bd00ff;line-height:.9rem;text-align:center;color:white;font-size:.4rem;width:100%;position:fixed;top:0;left:0;z-index:5}.content-wrap .img-wrap img{max-width:100%;position:relative;z-index:2}.mmd{max-width:100%;position:absolute;top:.9rem;left:0}.content-wrap .img-wrap{display:block;padding:0 .2rem .2rem;box-sizing:border-box;position:relative;background:transparent}.content-wrap{display:block}.outer a+a{margin-top:.2rem}.outer a{display:block;text-decoration:none}.outer{margin:0 .2rem}.item .font>span i{display:inline-block;width:.6rem;height:.3rem;background-image:url("https://sr.ffquan.cn/dtk_zhonghe/20201021/bu812fv6vrk961eop8n00.png");background-repeat:no-repeat;background-size:contain;background-position:center;position:relative;top:.05rem}.item .font>span{display:block;font-size:.3rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:.8rem;line-height:.8rem;color:#333}.item .font{margin-left:33%}.item .pic img{width:100%}.item .pic{float:left;width:30%;border-radius:.1rem;overflow:hidden}.item{background-color:white;position:relative;overflow:hidden;padding:.1rem;border-radius:.05rem}.tag i{background:white;margin-right:4px;color:#ff5351;float:left;padding:0 2px;border-radius:2px;font-size:90%}.tag{background:linear-gradient(90deg,#ff8873,#ff4f4f);display:inline-block;padding:2px;color:white}.price{overflow:hidden}.origin-price label{font-size:.2rem;color:#777;text-decoration:line-through;margin-left:.1rem}.origin-price{color:#fe3738;font-size:.3rem;display:inline-block;margin-top:.5rem}.count i{display:block}.count{float:right;text-align:center;background:linear-gradient(90deg,#f33,#ff3d81);box-shadow:0 .02rem .08rem 0 rgba(255,57,93,.46);color:white;padding:4px;border-radius:5px}.loading{text-align:center;line-height:.8rem;color:#a4acb5}.condition a.act:after{content:"";position:absolute;width:100%;height:.03rem;background:white;left:0;bottom:-.08rem}.condition a.act{color:#fff}.condition a+a{margin-left:.1rem}.condition a{display:inline-block;position:relative}.condition{display:block;margin:0 .2rem .3rem;color:hsla(0,0%,100%,.6);font-size:.3rem;line-height:.5rem;font-family:PingFangSC-Medium,PingFang SC;font-weight:500;position:relative}
    </style>
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-lazyload/1.3.3/vue-lazyload.js"></script>
</head>
<body>
<div id="root">

    <div class="top-wrap">
        <div class="inner">
            {{title}}
        </div>
    </div>
    <main class="content-wrap">
        <div class="img-wrap">
            <img src="http://img.alicdn.com/imgextra/i4/2053469401/O1CN01Lo0LHQ2JJi35nB5s4_!!2053469401.jpg"/>
        </div>
        <img class="mmd" src="https://sr.ffquan.cn/cms_pic/20201028/buchbeilbuussaugfneg0.png"/>
        <div class="condition">
            <a :class="[subsidy == '3'? 'act':'']" @click="search(3)">3元补贴</a>
            <a :class="[subsidy == '5'? 'act':'']" @click="search(5)">5元补贴</a>
        </div>
        <div class="outer">
            <a v-for="item in items" :key="item.skuId" @click="get_detail(item)"><!--:href="item.jumpUrl"-->
                <div class="item">
                    <span class="pic">
                        <img v-lazy="item.img"/>
                    </span>
                    <section class="font">
                        <span>
                            <i></i>
                            {{item.skuName}}
                        </span>
                        <div>
                            <span class="tag"><i>补贴</i>{{item.subsidy}}元</span>
                        </div>
                        <div class="price">
                            <span class="origin-price">
                                ¥{{item.couponAfterMoney}}
                                <label>¥{{item.originMoney}}</label>
                            </span>
                            <span class="count">
                                马上抢
                                <i>爆卖{{item.inOrderCount30Days}}件</i>
                            </span>
                        </div>
                    </section>
                </div>
            </a>
        </div>
    </main>
</div>
<div id="scrollerFooter" class="loading">
    下拉加载
</div>

<script src="http://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js"></script>
<script>

  var appKey = '5d84748908516'; // 此处替换成用户appKey
  var url = 'https://openapi.dataoke.com/jd-red/api/goods/jd-one-dollar-purchase';

  var userid = getUrlParams("userid");

  function getUrlParams(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); //定义正则表达式
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
  }

  Vue.use(VueLazyload, {
    preLoad: 1.3,
    error: 'https://sr.ffquan.cn/dtk_zhonghe/20201021/bu810a76vrk961eop8mg0.jpg',
    loading: 'https://sr.ffquan.cn/dtk_zhonghe/20201021/bu80a6f6vrk961eop8kg0.gif',
    attempt: 1,
  });
  new Vue({
    el: '#root',
    data: {
      title: '京东福利购，全场包邮',
      loading: false,
      pageId: 0,
      pageSize: 50,
      items: [],
      subsidy:'3'
    },
    methods: {
      featchData: function() {
        this.loading = true;
        var that = this;
        var temp = [];
        this.pageId = this.pageId + 1;
        temp.push('pageId=' + this.pageId);
        temp.push('pageSize=' + this.pageSize);
        temp.push('appKey=' + appKey);
        temp.push('subsidy=' + this.subsidy);
        var api = url + '?' + temp.join('&');
        $.get(api, function(res) {
          if (res && res.code == '0') {
            var list = res.data && res.data.list ? res.data.list : [];
            if (list.length > 0) {
              that.items = that.items.concat(list);
              that.loading = false;
            }
          }
        });
      },

      get_detail(item){
          var userAgent = navigator.userAgent;
          var data={userid:userid,url:item.jumpUrl};
          var temp = [];
          temp.push('userid=' + userid);
          temp.push('url=' + item.jumpUrl);
          var api = 'http://jzapi.jiruanos.com/api/tempactivity/promotionunionconvert' + '?' + temp.join('&');
          $.get(api, function(res) {
              if (res && res.code == '1') {
                  let obj = {
                      method: 'openJD',
                      params:{
                          url:res.data,
                      }
                  };
                  obj = JSON.stringify(obj);
                  if (userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1) {
                      window["android"].callHandler(obj);
                  }else{
                      window["webkit"].messageHandlers.callHandler.postMessage(obj);
                  }
              }else{
                  layer.msg(res.msg);
              }
          });
      },

      search: function(which) {
        this.subsidy = which
        this.pageId = 0
        this.featchData()
      },
    },
    mounted: function() {
      var that = this;
      var intersectionObserver = new IntersectionObserver(
        function(entries) {
          if (entries[0].intersectionRatio <= 0) return;
          if (!that.loading) {
            that.featchData();
          }
        });
      var scrollerFooter = document.querySelector('#scrollerFooter');
      if (scrollerFooter) {
        intersectionObserver.observe(scrollerFooter)
      }
    }
  })
</script>
</body>
</html>
